<template>
	<view class="com">
		<!-- 下单列表 -->
		<view class="order-list">
			<!-- 添加光效边框 -->
			<view class="glow-border"></view>
			<view class="list-title">
				下单列表
				<!-- 标题闪光效果 -->
				<view class="title-highlight"></view>
			</view>
			<view class="content">
				<view class="scroll-container">
					<view class="scroll-content">
						<view class="item" v-for="(item, index) in list" :key="index">
							<view class="serial">{{ item.serial }}</view>
							<view class="image">
								<img :src="item.img" class="img" :alt="item.img" />
							</view>
							<view class="text">
								<view class="title">{{ item.title }}</view>
								<view class="desc">{{ item.desc }}</view>
							</view>
							<!-- 文字流动光效 -->
							<view class="text-highlight"></view>
						</view>
						<!-- 重复内容以实现无缝循环 -->
						<view class="item" v-for="(item, index) in list" :key="'repeat-'+index">
							<view class="serial">{{ item.serial }}</view>
							<view class="image">
								<img :src="item.img" class="img" :alt="item.img" />
							</view>
							<view class="text">
								<view class="title">{{ item.title }}</view>
								<view class="desc">{{ item.desc }}</view>
							</view>
							<view class="text-highlight"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 动态图 -->
		<view class="gif-robin">
			<image class="gif" :src="configObj.robin" mode="heightFix"></image>
		</view>

		<!-- 整体边缘光效 -->
		<view class="edge-glow"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from "vue";
	import {
		getOrder
	} from "@/api/order.js";
	import {
		getConfig,
	} from '@/api/config.js';

	const list = ref([]);
	let config = []
	const configObj = reactive({
		robin: '',
	})

	const loadData = async () => {
		try {
			const res = await getOrder();
			list.value = res;
		} catch (error) {
			console.error('加载订单列表失败:', error);
		}
	};

	onMounted(async () => {
		try {
			config = await getConfig()
			for (let key in configObj) {
				configObj[key] = config.find(o => o.label === key).value
			}
			loadData();
		} catch (error) {
			uni.showToast({
				title: error.message || '加载失败',
				icon: 'none'
			});
		}
	});
</script>

<style lang="scss" scoped>
	.com {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: 600rpx;
		z-index: 20;
		display: flex;
		padding: 40rpx;
		gap: 20rpx;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.gif {
			display: block;
			height: 100%;
		}

		.gif-robin {
			height: 280rpx;
			border-radius: 8px;
			overflow: hidden;
			margin-top: 20px;
			position: relative;
			z-index: 2;
		}

		.order-list {
			flex: 1;
			background: linear-gradient(145deg, #ff5c5c, #e74a4a);
			border-radius: 12px;
			box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.25);
			min-width: 400rpx;
			max-width: 520rpx;
			border: 3px solid #d11a2d;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 2;

			.glow-border {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 10px;
				background: linear-gradient(45deg,
						rgba(255, 255, 255, 0) 0%,
						rgba(255, 255, 255, 0.3) 50%,
						rgba(255, 255, 255, 0) 100%);
				background-size: 200% 200%;
				animation: borderGlow 3s linear infinite;
				pointer-events: none;
				z-index: 1;
			}

			.list-title {
				box-sizing: border-box;
				font-size: 26px;
				color: #fff8e8;
				background: linear-gradient(to right, #d11a2d, #b51022);
				border-radius: 16px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
					inset 0 -4px 6px rgba(0, 0, 0, 0.2);
				letter-spacing: 3px;
				z-index: 4;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 60px;
				border: 4px outset #d93a4a;
				width: 100%;
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
				font-weight: bold;
				text-transform: uppercase;
				position: relative;
				overflow: hidden;
				border-radius: 12px 12px 0 0;

				.title-highlight {
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg,
							rgba(255, 255, 255, 0) 0%,
							rgba(255, 255, 255, 0.4) 50%,
							rgba(255, 255, 255, 0) 100%);
					animation: titleShine 3s infinite;
				}
			}

			.content {
				padding: 24rpx;
				width: 100%;
				box-sizing: border-box;
				background: #ff6b6b;
				border-radius: 0 0 8px 8px;
				overflow: hidden;
				flex: 1;
				position: relative;

				.scroll-container {
					height: 100%;
					overflow: hidden;
					position: relative;
				}

				.scroll-content {
					animation: scrollAnimation 30s linear infinite;
					will-change: transform;

					&:hover {
						animation-play-state: paused;
					}
				}

				.item {
					height: 80px;
					display: flex;
					align-items: center;
					margin-bottom: 10px;
					padding: 8px;
					background: rgba(209, 26, 45, 0.3);
					border-radius: 8px;
					border-left: 4px solid #d11a2d;
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
					position: relative;
					overflow: hidden;

					&:last-child {
						margin-bottom: 0;
					}

					.serial {
						width: 50px;
						text-align: center;
						font-size: 20px;
						font-weight: bold;
						color: #fff8e8;
						text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
					}

					.image {
						flex-shrink: 0;
						width: 64px;
						height: 64px;
						margin-left: 12px;
						border-radius: 6px;
						overflow: hidden;
						background: #fff8e8;
						box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
						border: 2px solid #eddabf;
						position: relative;
						z-index: 2;

						.img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}

					.text {
						flex: 1;
						overflow: hidden;
						margin-left: 12px;
						color: #fff8e8;
						text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
						position: relative;
						z-index: 2;

						.title {
							width: 100%;
							font-size: 18px;
							font-weight: bold;
							margin-bottom: 5px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.desc {
							width: 100%;
							font-size: 14px;
							opacity: 0.9;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.text-highlight {
						position: absolute;
						top: 0;
						left: -100%;
						width: 50%;
						height: 100%;
						background: linear-gradient(90deg,
								rgba(255, 255, 255, 0) 0%,
								rgba(255, 255, 255, 0.2) 50%,
								rgba(255, 255, 255, 0) 100%);
						animation: textShine 5s infinite;
						transform: skewX(-20deg);
					}
				}
			}
		}

		.edge-glow {
			position: absolute;
			top: -10px;
			left: -10px;
			right: -10px;
			bottom: -10px;
			background: radial-gradient(circle at center,
					rgba(255, 100, 100, 0.3) 0%,
					rgba(255, 50, 50, 0.1) 50%,
					transparent 70%);
			border-radius: 20px;
			z-index: 1;
			pointer-events: none;
			animation: pulse 4s ease-in-out infinite alternate;
		}
	}

	@keyframes borderGlow {
		0% {
			background-position: 0% 50%;
		}

		100% {
			background-position: 200% 50%;
		}
	}

	@keyframes titleShine {
		0% {
			left: -100%;
		}

		20% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}

	@keyframes textShine {
		0% {
			left: -100%;
			opacity: 0;
		}

		20% {
			opacity: 0.6;
		}

		100% {
			left: 150%;
			opacity: 0;
		}
	}

	@keyframes pulse {
		0% {
			opacity: 0.3;
			transform: scale(0.98);
		}

		100% {
			opacity: 0.6;
			transform: scale(1.02);
		}
	}

	@keyframes scrollAnimation {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-50%);
		}
	}
</style>